<template>
  <div class="app-container">

    <el-form :inline="true"
             :model="listQuery"
             class="demo-form-inline">
      <el-form-item label="订单状态">
        <el-select v-model="listQuery.tag"
                   filterable
                   placeholder="选择状态">
          <el-option v-for="item in tagList"
                     :key="item.id"
                     :label="item.name"
                     :value="item.id" />
        </el-select>
      </el-form-item>
      <el-form-item label="订单类型">
        <el-select v-model="listQuery.order_type"
                   filterable
                   placeholder="选择状态">
          <el-option v-for="item in orderTypeList"
                     :key="item.id"
                     :label="item.name"
                     :value="item.id" />
        </el-select>
      </el-form-item>
      <el-form-item label="交易日期">
        <el-date-picker v-model="dateRange"
                        type="daterange"
                        align="right"
                        unlink-panels
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                        value-format="yyyy-MM-dd"
                        :picker-options="pickerOptions">
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-input v-model="listQuery.keyword"
                  placeholder="输入关键词或ID搜索"
                  style="width: 200px;"
                  class="filter-item" />
      </el-form-item>

      <el-form-item>
        <el-button type="primary"
                   icon="el-icon-search"
                   @click="filterHandle">查询</el-button>
      </el-form-item>
    </el-form>

    <el-table v-loading="listLoading"
              :data="list"
              fit
              highlight-current-row
              style="width: 100%;">

      <el-table-column label="订单编号"
                       prop="id"
                       align="center"
                       width="80"></el-table-column>

      <el-table-column label="产品名称"
                       prop="order_name"
                       min-width="160px">
        <template slot-scope="{row}">
          <router-link :to="`/order/edit/${row.id}` "
                       class="link-type">
            <span>{{ row.order_name }}</span>
          </router-link>
        </template>

      </el-table-column>

      <el-table-column label="订单类型"
                       prop="order_type"
                       class-name="status-col">
        <template slot-scope="{row}">
          <el-tag :type="row.order_type | orderTypeFilter">
            {{row.order_type=='self_support'?'自营':'心愿'}}
          </el-tag>
        </template>
      </el-table-column>

      <el-table-column label="规格"
                       prop="product_specs.name"></el-table-column>

      <el-table-column label="单价"
                       prop="unit_price">
        <template slot-scope="{row}">
          <span>￥{{row.unit_price/100}}</span>
        </template>
      </el-table-column>

      <el-table-column label="数量"
                       prop="number"></el-table-column>

      <el-table-column label="金额"
                       prop="order_price">
        <template slot-scope="{row}">
          <span>￥{{row.order_price/100}}</span>
        </template>
      </el-table-column>

      <el-table-column label="提交时间"
                       prop="created_at"></el-table-column>

      <el-table-column label="状态"
                       prop="last_status"
                       class-name="status-col">
        <template slot-scope="{row}">
          <el-tag :type="row.last_status | statusFilter">
            {{row.last_status_f}}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作"
                       min-width="150"
                       class-name="small-padding fixed-width">
        <template slot-scope="{row}">

          <el-button size="mini"
                     icon="el-icon-truck"
                     type="success" />
          <el-button type="primary"
                     size="mini"
                     icon="el-icon-edit"
                     @click.stop="$router.push({ path: `/order/edit/${row.id}` })" />
        </template>
      </el-table-column>
    </el-table>

    <pagination v-show="total>0"
                :total="total"
                :page.sync="listQuery.page"
                :limit.sync="listQuery.page_size"
                @pagination="getList" />
  </div>
</template>

<script>
import {getOrderList} from '@/api/order'
import Pagination from '@/components/Pagination' // Secondary package based on el-pagination

export default {
  name: 'BrandList',
  components: {Pagination},
  filters: {
    statusFilter(status) {
      //all 所有 0待支付 10待发货 20待收货 30待评价 40交易成功 50交易失败  60订单取消
      const statusMap = {
        0: '',
        10: 'primary',
        20: 'success',
        30: 'info',
        40: 'success',
        50: 'danger',
        60: 'warning',
      }
      return statusMap[status]
    },
    orderTypeFilter(status) {
      const statusMap = {
        self_support: 'primary',
        wish: 'success',
      }
      return statusMap[status]
    },
  },
  data() {
    return {
      pickerOptions: {
        shortcuts: [
          {
            text: '最近一周',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
              picker.$emit('pick', [start, end])
            },
          },
          {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
              picker.$emit('pick', [start, end])
            },
          },
          {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
              picker.$emit('pick', [start, end])
            },
          },
        ],
      },

      tagList: [
        {
          id: '',
          name: '全部',
        },
        {
          id: '0',
          name: '待付款',
        },
        {
          id: '10',
          name: '待发货',
        },
        {
          id: '20',
          name: '待收货',
        },
        {
          id: '30',
          name: '待评价',
        },
        {
          id: '40',
          name: '交易成功',
        },
        {
          id: '50',
          name: '交易失败',
        },
        {
          id: '60',
          name: '订单取消',
        },
      ],

      orderTypeList: [
        {
          name: '全部',
          id: '',
        },
        {
          name: '自营',
          id: 'self_support',
        },
        {
          name: '心愿',
          id: 'wish',
        },
      ],

      dateRange: [],

      list: null,
      total: 0,
      listLoading: true,
      listQuery: {
        page: 1,
        page_size: 10,
      },
      currentSort: '',
    }
  },
  created() {
    this.getList()
  },
  methods: {
    getList() {
      this.listLoading = true
      getOrderList(this.listQuery).then(res => {
        this.list = res.data.items
        this.total = res.data.pagination.total_record
        this.listLoading = false
      })
    },
    filterHandle() {
      if (this.dateRange.length == 2) {
        this.$set(this.listQuery, 'begin_time', this.dateRange[0])
        this.$set(this.listQuery, 'end_time', this.dateRange[1])
      }
      this.$set(this.listQuery, 'page', 1)
      this.getList()
    },
    //启用/禁用
    switchBrand(row) {
      switchBrandStatus(row.brand_id, {status: row.status == 0 ? 1 : 0}).then(res => {
        this.$notify({
          message: '操作成功',
          type: 'success',
          duration: 2000,
        })
        this.getList()
      })
    },
    //保存当前聚焦的排序值->供watch使用
    saveCurrentSort(e) {
      this.currentSort = e.target.value
    },
    //修改排序
    changeSort(e, row) {
      console.log(e)
      if (!e.target.value.trim()) {
        this.$set(row, 'sort', this.currentSort)
        return
      }
      if (this.currentSort == e.target.value) return
      setBrandSort(row.brand_id, {sort: parseInt(e.target.value)}).then(res => {
        this.$notify({
          message: '排序修改成功',
          type: 'success',
          duration: 2000,
        })
        this.getList()
      })
    },
    //删除品牌
    deleteBrand(row, index) {
      this.$confirm('此操作将永久删除该品牌, 是否继续?', '提示', {
        type: 'warning',
      }).then(() => {
        delBrand(row.brand_id).then(res => {
          this.list.splice(index, 1)
          this.$notify({
            message: '删除成功',
            type: 'success',
            duration: 2000,
          })
        })
      })
    },
  },
}
</script>

<style>
.input-new-sort .el-input__inner {
  padding: 0;
  text-align: center;
}
</style>
<style lang="scss" scoped>
.edit-input {
  padding-right: 100px;
}
.cancel-btn {
  position: absolute;
  right: 15px;
  top: 10px;
}
.input-new-sort {
  width: 80px;
}
</style>
